flex gap

flex-gap支援度:Can I Use)

大家還記得在今年2月IE爺爺還沒退休以前...很多新的CSS屬性大家都支援就IE不支援，所以就需要用比較傳統的作法。

flex-gap是什麼?

• 用於設定 flexbox 容器中 flex 項目之間的間距。
• gap = <row-gap> <column-gap>，ex1:gap:10px，代表row和column的gap都是10px; ex2:gap:10px 20px，代表row的gap是10px、column的gap是20px;
• gap也可以分開寫為row-gap和column-gap。

像是flex box裡的子元素如果要有間距:
以前的作法:

#app{
  width:100vw;
  height:100vh;
  display:flex;
  flex-wrap:wrap;
}
.child{
  background-color:black;
  width:calc((100% - 20px) / 3);
  margin-right:10px;
  &:nth-child(3n){
    margin-right:0px;
  }
  &:nth-child(1),&:nth-child(2),&:nth-child(3){
    margin-bottom:10px;
  }
}

有了flex gap這個屬性以後:

#app{
  width:100vw;
  height:100vh;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.child{
  background-color:black;
  width:calc((100% - 20px) / 3);
}

是不是輕鬆很多呢?

Codepen範例

IT15-Day13-flex gap

參考來源

• https://fehey.com/css-flex-gap
• https://yogwang.site/2021/CSS-use-gap-in-flex-layout/